<script setup lang="ts">
import { RouterView, useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
// 记录当前选项Tab
const route = useRoute()
const router = useRouter()
const active = ref<string>(route.name as string)
watch(active, nv => {
  router.push({ name: nv })
})
</script>
<template>
  <router-view></router-view>
  <!-- <div class="center">{{ active }}</div> -->
  <VanTabbar v-model="active">
    <VanTabbarItem name="home" icon="home-o">首页</VanTabbarItem>
    <VanTabbarItem name="order" icon="bars">订单</VanTabbarItem>
    <VanTabbarItem name="me" icon="contact">订单</VanTabbarItem>
  </VanTabbar>
</template>
<style>
.center {
  text-align: center;
}
</style>
